<template>
    <el-dialog :close-on-click-modal="false" :title="mainTitleName()" v-model="visible" :width="1100" custom-class="notpt" destroy-on-close @closed="$emit('closed')">
        <el-container>
            <el-container class="is-vertical">
                <div class="panel-search-box" style="padding-left:0px;">
                    <div class="panel-search">
                        <el-input v-model="search.stem" placeholder="题干" clearable style="margin-left:0px;"></el-input>
                        <el-select v-model="search.type" placeholder="题型" clearable>
                            <el-option label="单选" :value="1"></el-option>
                            <el-option label="多选" :value="2"></el-option>
                        </el-select>
                        <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                        <el-dropdown trigger="click" @command="selectQuestionType" v-if="permission.add">
                            <el-button type="primary" icon="el-icon-plus">新增 </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item :command="item.id" v-for="item in questionType" :key="item.id">{{ item.name }}</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <el-button type="primary" icon="el-icon-download" @click="table_import" v-if="permission.import">导入</el-button>
                    </div>
                </div>
                <el-main class="nopadding">
                    <scDialogTable ref="table" :apiObj="$API.articleQuestion.list" remoteSort :params="search" :height="500" @dataChange="dataChange" @selection-change="selectionChange">
                        <el-table-column label="序号" prop="index" width="70" align="left"></el-table-column>
                        <el-table-column label="题干" prop="stem" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column label="题型" prop="type" align="center" width="120">
                            <template #default="scope">
                                {{scope.row.type ? scope.row.type.name : ''}}
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" prop="createdAt" width="150" align="center"></el-table-column>
                        <el-table-column label="操作" fixed="right" align="center" width="150">
                            <template #default="scope">
                                <el-button v-if="permission.edit" type="text" size="small" @click="table_edit(scope.row)">编辑</el-button>
                                <el-divider v-if="permission.delete" direction="vertical"></el-divider>
                                <el-popconfirm v-if="permission.delete" :title="'确认是否删除此题目?'" @confirm="table_del(scope.row)">
                                    <template #reference>
                                        <el-button type="text" size="small">删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </scDialogTable>
                </el-main>
            </el-container>
        </el-container>
    </el-dialog>
    
    <question-save-dialog v-if="dialog.questionSave" ref="questionSaveDialog" @success="handleSuccess" @closed="dialog.questionSave=false"></question-save-dialog>

    <import-dialog v-if="dialog.import" ref="importDialog" @success="handleSuccess" @closed="dialog.import=false" :articleId="courseArticle.id"></import-dialog>
   
</template>

<script>
import { rolePermission } from '@/utils/permission'
import questionSaveDialog from './save.vue'
import importDialog from './import.vue'
export default {
    components: {
        questionSaveDialog,
        importDialog
    },
    data() {
        return {
            visible: false,
            selection: [],
            courseArticle: {},
            dialog: {
                questionSave: false,
                import: false,
            },
            search: {
                name: null,
                courseId: null,
            },
            permission: {
                add: rolePermission('course-question-add'),
                import: rolePermission('course-question-import'),
                edit: rolePermission('course-question-edit'),
                delete: rolePermission('course-question-delete'),
            },
            questionType: [
                { id: 1, name: "单选题" },
                { id: 2, name: "多选题" }
            ],
        }
    },
    mounted() {
    },
    methods: {
        open(row) {
            this.visible = true
            this.courseArticle = row
            this.search.articleId = row.id
            return this
        },
        dataChange(res, tableData) {
			let total = res.data.total
            let perPage = res.data.perPage
            let page = (this.$refs.table && this.$refs.table.currentPage) || 1
            tableData.forEach((item, index) => {
				item.index = total - (page * perPage + index - perPage)
            })
        },
        selectQuestionType(e) {
            this.dialog.questionSave = true
            this.$nextTick(() => {
                this.$refs.questionSaveDialog.open('add', e, this.courseArticle)
            })
        },
        //导入
        table_import() {
            this.dialog.import = true
            this.$nextTick(() => {
                this.$refs.importDialog.int()
            })
        },
        //编辑
        table_edit(row) {
            this.dialog.questionSave = true
            this.$nextTick(() => {
                this.$refs.questionSaveDialog.open('edit', '', this.courseArticle).setData(row)
            })
        },
        //删除
        async table_del(row) {
            await this.$API.articleQuestion.action.delete({ id: row.id }).then(() => {
                this.$refs.table.refresh()
                this.$notify.success("删除成功")
            })
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selection = selection
        },
        // 搜索
        upsearch() {
            this.$refs.table.upData(this.search)
        },
        //本地更新数据
        handleSuccess() {
            this.$refs.table.refresh()
        },
        mainTitleName() {
            let titleName = '题目管理';
            if (this.courseArticle && this.courseArticle.title) {
                titleName = `【${this.courseArticle.title}】题目管理`;
            }
            return titleName;
        }
    }
}
</script>

<style>
.audio {
    width: 0; 
    height: 0;
    display: none;
}

/* dialog内上边距设置 */
.position {
    display: flex;
    align-items: center;
}
.position-item {
    margin-right: 5px;
}
.position-item:last-child {
    margin-right: 0;
}
/* dialog内上边距设置 END */
</style>
